
{extend name='public/window' /}

{block name="content"}
<style>
    .layui-upload-drag {
        position: relative;
        padding: 10px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
    }
    .layui-input-block{
        margin-left: 141px;
        min-height: 36px;
    }
    .layui-textarea {
        display: block;
        width: 85%;
        padding-left: 10px;
    }
    .layui-input{
        display: block;
        width: 85%;
        padding-left: 10px;
    }
    .layui-form-label{
        width: 110px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form">
                {if isset($info.id)}
                <input type="hidden" name="id" value="{$info.id}">
                {/if}
                <input type="hidden" name="__token__" id="token" value="{:token()}"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">商户</label>
                    <div class="layui-input-inline">
                        <select name="merchant_id" lay-search=""  lay-verify="required">
                            <option value="" >请选择</option>
                            {volist name="merchant_list" id="t"}
                            <option value="{$t.id}" >{$t.name} - {$t.code}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属部门</label>
                    <div class="layui-input-inline">
                        <select name="department_id" lay-search=""  lay-verify="required">
                            <option value="" >请选择</option>
                            {volist name="department_list" id="t"}
                            <option value="{$t.id}" >{$t.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费金额 *</label>
                    <div class="layui-input-block">
                        <input type="number" name="amount"  lay-verify="required" lay-filter="amount" autocomplete="off" placeholder="请输入需缴金额" class="layui-input" id="amount">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费类型</label>
                    <div class="layui-input-inline">
                        <select name="cost_type_id" id="cost_type_list" lay-search=""  lay-verify="required" lay-filter="cost_type_list"  lay-verify="required">
                            <option value="0" >请选择</option>
                            {volist name="cost_type_list" id="t"}
                            <option value="{$t.id}" >{$t.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费列表：</label>
                    <div class="layui-input-block">
                        <table class="layui-hide" id="student_table" lay-filter="student_table"></table>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手续费比例：</label>
                    <div class="layui-input-block">
                        <input type="number" name="service_charge_rate" id="service_charge_rate" value="{$service_charge}" lay-filter="service_charge_rate"  lay-verify="required" autocomplete="off" class="layui-input" >
                        <span>%</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手续费：</label>
                    <div class="layui-input-block">
                        <input type="number" name="service_charge" id="service_charge" disabled   lay-verify="required" autocomplete="off" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">需缴金额 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="real_amount" disabled lay-verify="required" autocomplete="off" placeholder="请输入需缴金额" class="layui-input" id="real_amount">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注 </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入备注"  class="layui-textarea" name="remark"></textarea>
                    </div>
                </div>
                <div class="layui-form-item"  id="interval">
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" id="t_start_time" name="b_start_time" class="layui-input" placeholder="开始时间">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-inline">
                            <input type="text" id="t_end_time" name="b_end_time" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin " style="width: 100%">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0px;text-align: center;">
                            <button class="layui-btn" lay-submit="" lay-filter="add">{:__('Submit')}</button>
                            <button type="reset" class="layui-btn layui-btn-primary">{:__('Reset')}</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="layui-btn  layui-btn-danger layui-btn-xs" data-title="删除" lay-event="del"><i class="layui-icon "></i></a>
</script>
<script>
    layui.use(['element', 'form', 'table', 'jquery','lucky','upload','laydate','xmSelect'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        laydate.render({
            elem: '#t_start_time'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#t_end_time'
            ,type: 'datetime'
        });
        var costType = [];
        var student_table = table.render({
            id:'student_table',
            elem:'#student_table',
            cols: [[
                {field: 'name', title: '收费名称'},
                {field: 'type', title: '收费类型', templet: function (item) {
                        var type = item.type
                        if (type == 1) {
                            return '押金'
                        } else if (type == 2) {
                            return '费用'
                        } else if (type == 3) {
                            return '证件'
                        } else {
                            return '未知类型'
                        }
                    }},
                {title: '金额', field: 'amount'},
                {templet: '#operationTpl', align: 'center', title: '操作操作操作'}
            ]],
            data: costType
        });
        table.on('tool(student_table)', function (obj) {
            var data = obj.data;
            var _id=parseInt(data.id);
            var layEvent = obj.event;
            if(layEvent==="detail"){
                lucky.CreateOpenForm("缴费详情","{:url('detail')}");
                return false;
            }else if(layEvent==="del"){
                console.log('打印',obj.data)
                obj.del();
                var amount = $("#amount").val();
                var real_amount = 0;
                var param  = layui.table.cache["student_table"]
                for (let i = 0; i < param.length; i++) {
                    if (param[i] == null || param[i] == "" || JSON.stringify(param[i]) == "{}") {
                        param.splice(i, 1);
                        console.log(param);
                        i = i - 1;
                    }
                }
                console.log('打印',param)
                for (var i =0;i< param.length;i++){
                    param[i].amount = (amount * param[i].rate)/100
                    real_amount += param[i].amount;
                }
                for (var s =0;s< param.length;s++){
                    if (param[s].main == 1){
                        param[s].amount  = parseFloat(parseFloat(amount) - parseFloat(real_amount))
                    }
                }
                student_table.reload({data:param});
                return false;
            }
        });

        $("#amount").on("input",function(e){
            console.log('监听中……')
            student_table.reload({data:[]});
            $("#cost_type_list").val(0);
            $("#real_amount").val(0);
        });

        $("#service_charge_rate").on("input",function(e){
            console.log('监听中……')
            var amount = $('#amount').val()
            var service_charge_rate = e.delegateTarget.value;
            service_charge_rate = parseFloat(service_charge_rate/100)
            if (!service_charge_rate){
                $('#service_charge_rate').val(0)
                $('#service_charge').val(0)
                $('#real_amount').val(amount)
                return false;
            }
            var param  = layui.table.cache["student_table"]
            if (param == null || param == "" || JSON.stringify(param) == "{}" ){
                return  false;
            }
            var service_charge = parseFloat(amount * service_charge_rate)
            $('#service_charge').val(service_charge)
            $("#real_amount").val(parseFloat(amount) + parseFloat(service_charge));
        });
        // cost_type_list
        form.on('select(cost_type_list)', function(data){
            student_table.reload({data:[]});
            console.log('data',data.value)
            if (!data.value){
                return false
            }
            var service_charge_rate = $("#service_charge_rate").val();
            service_charge_rate = service_charge_rate/100
            var real_amount = 0;
            var  amount = $("#amount").val();
            if (!amount){
                layer.msg("请先填写缴费金额",{icon:15,time:1000,shade:0.3});
                return false;
            }
            console.log('amount',amount)
            $.ajax({
                url:"{:url('getCostType')}",
                type:"post",
                data: {'cost_type':data.value},
                dataType:"json",
                success:function(data){
                    var param = data.data
                    // console.log(param)
                    for (var i =0;i< param.length;i++){
                        param[i].amount = (amount * param[i].rate)/100
                        real_amount += param[i].amount;
                    }
                    for (var s =0;s< param.length;s++){
                        if (param[s].main == 1){
                            param[s].amount  = parseFloat(parseFloat(amount) - parseFloat(real_amount))
                        }
                    }
                    var service_charge = parseFloat(amount * service_charge_rate)
                    $('#service_charge').val(service_charge)
                    $("#real_amount").val(parseFloat(amount) + parseFloat(service_charge));
                    student_table.reload(data);
                }
            });
            return false;
        });
        upload.render({
            elem:'#editimg'
            ,url: "{:url('common/UpImg')}" //图片上传地址
            ,accept: 'images' //
            ,acceptMime: 'image/*'
            ,size: 1024*12
            ,before:function (res) {
                loading = layer.load(2, {
                    shade: [0.2, '#000'] //0.2透明度的白色背景
                });
            }
            ,done: function(data){
                layer.close(loading);
                if (data.code==1){
                    $("#show_id").attr("src",data.data.thumb_path);
                    $("#description").val(data.data.thumb_path);
                    layer.msg('图片上传成功', {icon: 5, time: 1000});
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }
            ,error:function (red) {
                layer.close(loading);
                layer.msg("网络错误", {icon: 5, time: 1500});
            }
        });

        //表单赋值
        var info = {:json_encode($info)};
        form.val("form",info);
        form.on('submit(add)', function (data) {
            var datas  = layui.table.cache["student_table"]
            data.field.type = 2 // 添加type
            data.field.is_admin_create = 0 // 添加type
            data.field.pay_status = 0 // 支付状态
            data.field.datas = datas // 添加type
            lucky.FormSubmit("{:url('add')}",data.field,true);
            return false;
        });
    })
</script>

{/block}

